<template>
    <div class="home-bar page-common">
      <!--轮播图组件-->
      <slide :imgs="imgArr"></slide>
        <div class="mui-content">
          <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
              <router-link to="/news/newslist">
                <span class="mui-icon mui-icon-home"></span>
                <div class="mui-media-body">新闻资讯</div></router-link>
            </li>

            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/photo/photolist">
                          <span class="mui-icon mui-icon-email">
                          </span>
              <div class="mui-media-body">图片分享</div></router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/good/goodlist">
              <span class="mui-icon mui-icon-chatbubble"></span>
              <div class="mui-media-body">商品购买</div></router-link>

            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/feedback">
              <span class="mui-icon mui-icon-location"></span>
              <div class="mui-media-body">留言反馈</div></router-link>

            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/vide">
              <span class="mui-icon mui-icon-search"></span>
              <div class="mui-media-body">视频专区</div></router-link>

            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/callme">
              <span class="mui-icon mui-icon-phone"></span>
              <div class="mui-media-body">联系我们</div></router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/mousse">
              <span class="mui-icon mui-icon-mousse"></span>
              <div class="mui-media-body">甜品热点</div></router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/scene">
              <span class="mui-icon mui-icon-scene"></span>
              <div class="mui-media-body">秋水伊人</div></router-link>
            </li>
          </ul>
        </div>
    </div>
</template>
<script>
  import slide from '../components/slide'
    export default {
        data() {
            return {
                msg:'我是首页',
                imgArr:[], //轮播图数据
                foodTypes: [], // 食品分类列表
            }
        },
        components: {
          slide
        },
        methods:{
            getBannerDate(){
             this.axios.get("../static/getLunBo.json",{}).then(res => this.imgArr = res.data.message);
             /*注意：这里需要判断是否请求数据*/
            }
        },
      created(){
            this.getBannerDate();
      }
    }
</script>
<style scoped>
  .home-bar{
    height: 200px;
  }
  .mui-content{
    background-color: #fff;
    border-bottom: 1px solid #c1c1c1;
  }
  .mui-content > .mui-table-view:first-child{
    margin-top: 0;
  }
  .mui-grid-view.mui-grid-9{
    background-color: #fff;
    border:0;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border:0;
  }
  .mui-icon-home:before,
  .mui-icon-email:before,
  .mui-icon-chatbubble:before,
  .mui-icon-location:before,
  .mui-icon-search:before,
  .mui-icon-phone:before,
  .mui-icon-mousse:before,
  .mui-icon-scene:before
  {
    content:"";
    display: block;
    width: 50px;
    height: 50px;
    background-repeat: round;
  }
  .mui-icon-home:before{
    background-image: url("../../static/img/1.png");
  }
  .mui-icon-email:before{
    background-image: url("../../static/img/2.png");
  }
  .mui-icon-chatbubble:before{
    background-image: url("../../static/img/3.png");
  }
  .mui-icon-location:before{
    background-image: url("../../static/img/4.png");
  }
  .mui-icon-search:before{
    background-image: url("../../static/img/5.png");
  }
  .mui-icon-phone:before{
    background-image: url("../../static/img/6.png");
  }
  .mui-icon-mousse:before{
    background-image: url("../../static/img/7.png");
  }
  .mui-icon-scene:before{
    background-image: url("../../static/img/8.png");
  }
</style>
